import { Link } from '@/src/navigation'
import Image from 'next/image'
import { useTranslations } from 'next-intl'

import arrowWhiteIcon from '@/public/arrow_right_white.png'

interface LayoutProps {
  children: React.ReactNode
}

const Layout: React.FC<LayoutProps> = (props) => {
  const { children } = props
  const t = useTranslations('home.cases')
  return (
    <section className='flex flex-col items-center'>
      <div className='h-[1.875rem] lg:h-[5.4375rem] 2xl:h-[8.15625rem]' />
      <div className='text-center text-[#A6C32D] font-bold text-[0.875rem] leading-[1rem] lg:text-[0.8125rem] lg:leading-[1.2rem] 2xl:text-[1.21875rem] 2xl:leading-[1.8rem]'>
        {t('title')}
      </div>
      <div className='text-center font-bold text-[0.75rem] leading-[1.40625rem] lg:text-[1.4375rem] lg:leading-[1.875rem] 2xl:text-[2.15625rem] 2xl:leading-[2.8125rem]'>
        {t('desc')}
      </div>
      <div className='h-4 lg:h-6 2xl:h-9' />
      <div className='grid grid-cols-1 box-border w-full gap-[0.9375rem] px-[0.9375rem] lg:gap-4 lg:px-0 lg:grid-cols-3 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px] 2xl:gap-6'>
        {children}
      </div>
      <div className='h-[1.5625rem] lg:h-[2.5rem] 2xl:h-[3.75rem]' />
      <Link
        href='/cases'
        className='flex justify-center items-center px-[0.96875rem] py-[0.8125rem] bg-black lg:px-[1.6875rem] lg:py-[1.0625rem] 2xl:px-[2.53125rem] 2xl:py-[1.59375rem] hover:bg-gray-700 transition-colors duration-200'
      >
        <div className='text-white text-[0.875rem] leading-[0.875rem] font-medium lg:text-[1rem] lg:leading-[1rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'>
          {t('discoverMore')}
        </div>
        <div className='w-[0.59375rem] lg:w-4 2xl:w-6' />
        <div className='relative w-[0.59375rem] h-[0.53125rem] lg:w-[0.8125rem] lg:h-[0.6875rem] 2xl:w-[1.21875rem] 2xl:h-[1.03125rem]'>
          <Image
            src={arrowWhiteIcon}
            alt='arrow icon'
            fill
            sizes='(max-width: 1024px) 0.59375rem'
          />
        </div>
      </Link>
      <div className='h-[1.875rem] lg:h-[5.4375rem] 2xl:h-[8.15625rem]' />
    </section>
  )
}

export default Layout
